<template>
  <h1>猜数字练习</h1>
  <input type="text" placeholder="请输入您猜的数字" v-model="inputValue">
  <button @click="guess">猜</button>
  <h4>您猜的结果是: {{result}}</h4>
</template>

<script setup>
import {ref} from "vue";

let randomNumber = parseInt(Math.random() * 100)+1;
console.log(randomNumber);
const inputValue = ref("");
const result = ref("");
const guess = () =>{
  if (inputValue.value.trim() == "") {
    inputValue.value = '';
    alert('请输入数字!');
    return;
  }
  if (inputValue.value > 100 || inputValue.value < 1) {
    result.value = "请输入1-100的数字";
  } else if (inputValue.value > randomNumber) {
    result.value = "猜的数字太大了";
  } else if (inputValue.value < randomNumber) {
    result.value = "猜的数字太小了";
  } else {
    result.value = "恭喜你猜对了";
  }
}
</script>

<style scoped>

</style>